<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <title>图片信息提取系统</title>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #333333;
            --container-border: #ddd;
            --user-message-bg: #e3f2fd;
            --bot-message-bg: #f1f1f1;
            --button-bg: #4CAF50;
            --button-text: white;
        }
        
        .dark-mode {
            --bg-color: #1a1a1a;
            --text-color: #f1f1f1;
            --container-border: #444;
            --user-message-bg: #2d3e50;
            --bot-message-bg: #333;
            --button-bg: #2d3e50;
        }
        
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
        }
        .chat-container {
            border: 1px solid var(--container-border);
            border-radius: 8px;
            height: 500px;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 10px;
            background-color: var(--bg-color);
        }
        .message {
            margin-bottom: 10px;
            padding: 8px 12px;
            border-radius: 18px;
            max-width: 70%;
        }
        .user-message {
            background-color: var(--user-message-bg);
            margin-left: auto;
        }
        .bot-message {
            background-color: var(--bot-message-bg);
            margin-right: auto;
        }
        .input-area {
            display: flex;
            gap: 10px;
        }
        #file-input {
            display: none;
        }
        .file-label {
            padding: 8px 12px;
            background-color: var(--button-bg);
            color: var(--button-text);
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Windows激活状态检测</h1>
    <div class="chat-container" id="chat">
        <div class="message bot-message">
            请上传包含Windows系统信息的截图,我将帮您检测激活状态。
        </div>
    </div>
    <div class="input-area">
        <input type="file" id="file-input" accept="image/*">
        <label for="file-input" class="file-label">选择图片</label>
        <button id="send-btn" disabled>发送</button>
        <button id="theme-toggle" class="file-label" style="margin-left: auto;">切换主题</button>
    </div>
    <script>
        const chatContainer = document.getElementById('chat');
        const fileInput = document.getElementById('file-input');
        const sendBtn = document.getElementById('send-btn');
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                sendBtn.disabled = false;
                // 显示用户上传的消息
                const userMessage = document.createElement('div');
                userMessage.className = 'message user-message';
                // 创建并显示图片预览
                const imgPreview = document.createElement('img');
                imgPreview.src = URL.createObjectURL(e.target.files[0]);
                imgPreview.style.maxWidth = '800px';
                imgPreview.style.width = '100%';
                imgPreview.style.height = 'auto';
                imgPreview.style.marginTop = '10px';
                imgPreview.style.borderRadius = '8px';
                userMessage.appendChild(imgPreview);
                chatContainer.appendChild(userMessage);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        });
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
        });
        
        // 初始化主题
        if (localStorage.getItem('darkMode') === 'true') {
            document.body.classList.add('dark-mode');
        }
        
        sendBtn.addEventListener('click', async () => {
            if (!fileInput.files[0]) return;
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });
                if (response.ok) {
                    const data = await response.json();
                    // 显示机器人回复
                    const botMessage = document.createElement('div');
                    botMessage.className = 'message bot-message';
                    const congrats = ["恭喜您的Windows系统已激活！", "太棒了！您的Windows已激活！", "完美！检测到Windows已激活！", "好消息！您的Windows系统已激活！"];
                    const congrats2 = ["抱歉！好像激活有一些问题", "请再仔细检测一下", "加油,相信通过你的努力可以激活的", "请耐心检测一下！"];
                    if(data.report.activation_status == 'Windows已激活'){
                        const randomCongrats = congrats[Math.floor(Math.random() * congrats.length)];
                        data.report.activation_status = `根据图片所示,Windows已激活。${randomCongrats}`;
                    }else if(data.report.activation_status == 'Windows未激活'){
                        const randomCongrats = congrats2[Math.floor(Math.random() * congrats.length)];
                        data.report.activation_status = `根据图片所示,Windows未激活。${randomCongrats}`;
                    }
                    botMessage.innerHTML = `检测结果:<br>${data.report.activation_status}`;
                    chatContainer.appendChild(botMessage);
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                } else {
                    throw new Error('上传失败');
                }
            } catch (error) {
                console.error('Error:', error);
                const botMessage = document.createElement('div');
                botMessage.className = 'message bot-message';
                botMessage.textContent = '处理图片时出错，请重试。';
                chatContainer.appendChild(botMessage);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            // 重置表单
            fileInput.value = '';
            sendBtn.disabled = true;
        });
    </script>
</body>
</html>